<template>
  <div class="el-badge">
    <slot></slot>
    <transition name="el-zoom-in-center">
        <!--is-fixed类用来定位上面数字的显示-->
      <sup
        v-show="!hidden && (content || content === 0 || isDot)"
        v-text="content"
        class="el-badge__content"
        :class="[
          'el-badge__content--' + type,
          {
            'is-fixed': $slots.default,
            'is-dot': isDot
          }
        ]">
      </sup>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'MyBadge',

  props: {
    value: {}, //显示值
    max: Number, //最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型
    isDot: Boolean, //小圆点
    hidden: Boolean, //隐藏 badge
    type: { //类型
      type: String,
      validator(val) {
        return ['primary', 'success', 'warning', 'info', 'danger'].indexOf(val) > -1;
      }
    }
  },

  computed: {
    // 返回显示的数据
    content() {
      //  如果是显示小圆点，直接返回
      if (this.isDot) return;
      const value = this.value;
      const max = this.max;
      if (typeof value === 'number' && typeof max === 'number') {
        // 如果显示值比最大值则显示'{max}+'
        return max < value ? `${max}+` : value;
      }
      return value;
    }
  }
};
</script>

<style lang = "scss" scoped>
    .el-badge{
        position:relative;
        vertical-align:middle;
        display:inline-block
    }
    .el-badge__content{
        background-color:#F56C6C;
        border-radius:10px;
        color:#FFF;
        display:inline-block;
        font-size:12px;
        height:18px;
        line-height:18px;
        padding:0 6px;
        text-align:center;
        white-space:nowrap;
        border:1px solid #FFF
    }
    .el-badge__content.is-fixed{
        position:absolute;
        top:10px;
        right:10px;
        -webkit-transform:translateY(-50%) translateX(100%);
        transform:translateY(-50%) translateX(100%)
    }
    .el-rate__icon,.el-rate__item{
        position:relative;
        display:inline-block
    }
    .el-badge__content.is-fixed.is-dot{
        right:5px
    }
    .el-badge__content.is-dot{
        height:8px;
        width:8px;
        padding:0;
        right:0;
        border-radius:50%
    }
    .el-badge__content--primary{
        background-color:#409EFF
    }
    .el-badge__content--success{
        background-color:#67C23A
    }
    .el-badge__content--warning{
        background-color:#E6A23C
    }
    .el-badge__content--info{
        background-color:#909399
    }
    .el-badge__content--danger{
        background-color:#F56C6C
    }
</style>